//创建Vue实例
const { createApp } = Vue;
const app = createApp({
  data() {
    return {
      heroList: [],
      property: {
        type: 'hero_type',
        value: 0,
      },
      checked: 0,
      keyword: '',
    };
  },
  methods: {
    async getHeroList() {
      const heroArr = (await axios.get('http://project.x-zd.net:3001/apis/herolist')).data.data.reverse();
      console.log(heroArr);
      this.heroList = heroArr;
    },
    changeProperty(type, value) {
      this.property.type = type;
      this.property.value = value;
      this.checked = value;
      this.keyword = '';
    },
    changeKeyword(e) {
      this.keyword = e.target.value;
      this.checked = 0;
      this.property.value = 0;
    },
  },
  mounted() {
    this.getHeroList();
  },
  computed: {
    heroA() {
      return value => {
        return `https://pvp.qq.com/web201605/herodetail/${value}.shtml`;
      };
    },
    heroImg() {
      return value => {
        return `https://game.gtimg.cn/images/yxzj/img201606/heroimg/${value}/${value}.jpg`;
      };
    },
    filterHeros() {
      const { type, value } = this.property;
      if (this.keyword === '') {
        if (type === 'pay_type')
          return this.heroList.filter(item => {
            return item.pay_type === value;
          });
        if (type === 'hero_type') {
          if (value === 0) {
            return this.heroList;
          }
          return this.heroList.filter(item => {
            return item.hero_type === value || item.hero_type2 === value;
          });
        }
      } else {
        let res = this.heroList.filter(item => {
          return item.cname.includes(this.keyword);
        });
        res = _.cloneDeep(res);
        return res.map(item => {
          item.cname = item.cname.replace(this.keyword, `<span style="color:red">${this.keyword}</span>`);
          return item;
        });
      }
    },
  },
});

//挂载
app.mount('#app');
